<template>
  <div class="main">
    <el-card>
      <el-form ref="wareFormRef" :inline="true" :model="ruleForm" :rules="rules" class="warehouse-info" :label-position="labelPosition">
        <el-form-item label="仓库编号">
          <el-input v-model="ruleForm.code" placeholder="请输入" :disabled="true" />
        </el-form-item>
        <!-- 所属仓库 -->
        <el-form-item prop="warehouseName" label="所属仓库">
          <el-select v-model="ruleForm.warehouseName" placeholder="请选择">
            <el-option label="3号仓库" value="3号仓库" />
            <el-option label="1号仓库" value="1号仓库" />
            <el-option label="2号仓库" value="2号仓库" />
          </el-select>
        </el-form-item>
        <!-- 仓库名称 -->
        <el-form-item prop="name" label="仓库名称">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <!-- 温度类型 -->
        <el-form-item class="no" prop="temperatureType" label="温度类型">
          <el-select v-model="ruleForm.temperatureType" placeholder="请选择">
            <el-option label="常温" value="CW" />
            <el-option label="冷藏" value="LC" />
            <el-option label="恒温" value="HW" />
          </el-select>
        </el-form-item>
        <!-- 承重类型 -->
        <el-form-item prop="bearingType" label="承重类型">
          <el-select v-model="ruleForm.bearingType" placeholder="请选择">
            <el-option label="常温" value="CW" />
            <el-option label="冷藏" value="LC" />
            <el-option label="恒温" value="HW" />
          </el-select>
        </el-form-item>
        <!-- 用途属性 -->
        <el-form-item prop="useType" label="承重类型">
          <el-select v-model="ruleForm.useType" placeholder="请选择">
            <el-option label="入库缓存区" value="RKHCQ" />
            <el-option label="出库缓存区" value="CKHCQ" />
            <el-option label="存储区" value="CCQ" />
            <el-option label="分拣区" value="FJQ" />
            <el-option label="质检区" value="ZJQ" />
          </el-select>
        </el-form-item>
        <!-- 负责人 -->
        <el-form-item prop="personName" label="负责人">
          <el-input v-model="ruleForm.personName" placeholder="请输入" />
        </el-form-item>
        <!-- 联系电话 -->
        <el-form-item class="no" label="联系电话">
          <el-input v-model="ruleForm.phone" placeholder="请输入" />
        </el-form-item>
        <!-- 库区状态 -->
        <el-form-item prop="status" label="库区状态">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="0">停用</el-radio>
            <el-radio :label="1">启用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="btm">
          <el-button round @click="$router.go(-1)">返回</el-button>
          <el-button type="primary" round @click="submit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { editAreaList } from '@/api'
export default {
  data() {
    return {
      labelPosition: 'top',
      ruleForm: {
        // formInline: {
        // },
        code: '',
        name: '',
        type: '',
        address: '',
        location: '',
        status: '',
        surface: '',
        personName: '',
        phone: ''
      },
      hireMap: {
        0: '停用',
        1: '启用'
      },
      rules: {
        name: [
          { required: true, message: '请输入仓库名称', trigger: 'blur' }
        ],
        warehouseName: [
          { required: true, message: '请选择所属仓库', trigger: 'blur' }
        ],
        temperatureType: [
          { required: true, message: '请选择温度类型', trigger: 'blur' }
        ],
        bearingType: [
          { required: true, message: '请选择承重类型', trigger: 'blur' }
        ],
        useType: [
          { required: true, message: '请选择用途属性', trigger: 'blur' }
        ],
        personName: [
          { required: true, message: '请输入负责人', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    this.ruleForm = this.$route.query.row
    // this.ruleForm.status = this.hireMap[+this.$route.query.row.status]
    console.log(this.$route.query)
  },
  methods: {
    submit() {
      this.$refs.wareFormRef.validate(async(valid) => {
        if (!valid) return
        await editAreaList(this.ruleForm)
        this.$message.success('恭喜你，提交成功')
        this.$router.go(-1)
      })
    }
  }
}
</script>

  <style lang="scss" scoped>

//   .tit{
//       color: #887e7e;
//     font-size: 12px;
//     font-family: PingFangSC, PingFangSC-Medium;
//     font-weight: 500;
//     span{
//       color: red;
//     }
//   }

  .main{
.el-card{
    min-width: 1100px;
}
 min-height: calc(100vh - 50px);
    background-color: #fdfafa;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 25px;
    .el-form-item{
    //   margin-right: 40px;
      padding-left: 15px;
      padding-right: 15px;
    //   width: 25%;
    }
    ::v-deep .el-form-item__label {
      color: #887e7e;
    font-size: 12px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    margin-bottom: -10px;
  }
    .no{
      margin-right: 0;
    }
    // .ipt{
    //   width: 265px;
    // }
    .el-button{
      width: 170px;
      height: 40px;
    }
    .btm{
      width: 100%;
      border-top: 1px solid #f5efee;;
  // margin-left: 300px;
     margin-top: 10px;
      padding-top: 30px;
      padding-left: 290px;

    }
    .el-input{
        width: 204px
    }
  }
  </style>>

